<template>
  <div>
    <div style="font-size: 18px; font-weight: bold; padding: 0 0 10px">
      成员组成
    </div>
    <div style="width: 100%; height: 500px; position: relative">
      <div id="member" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
// import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {},
  data() {
    return {
      listData: [
        // {
        //   title: "请审批wangs商城项目",
        //   date: "2017-12-16",
        // },
        // {
        //   title: "请审批采购关于购买服务器1",
        //   date: "2017-12-16",
        // },
        // {
        //   title: "请审批采购关于购买服务器2",
        //   date: "2017-12-16",
        // },
        // {
        //   title: "请审批采购关于购买服务器3",
        //   date: "2017-12-16",
        // },
        // {
        //   title: "请审批采购关于购买服务器4",
        //   date: "2017-12-16",
        // },
        // {
        //   title: "请审批采购关于购买服务器5",
        //   date: "2017-12-16",
        // },
      ],
      option: {
        step: 0.6,
      },
      options: {
        legend: {
          orient: "vertical", // 图例列表的布局朝向，'horizontal'为水平,'vertical'为垂直
          // x: "right", // 图例的位置
          right: "10%",
          top: "5%",
          data: ["普通成员", "管理员", "超级管理员"],
        },
        series: [
          {
            name: "成员组成",
            type: "pie",
            radius: "60%",
            center: ["50%", "40%"],
            data: [
              { value: 2, name: "普通成员" },
              { value: 3, name: "管理员" },
              { value: 1, name: "超级管理员" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
        //饼状图下方添加文字
        // graphic: {
        //   type: "text",
        //   left: "center",
        //   top: "80%",
        //   style: {
        //     text: "ECharts 饼状图下方的文字",
        //     textAlign: "center",
        //     fill: "#000",
        //     fontSize: 16,
        //   },
        // },
      },
    };
  },
  created() {
    this.getHandle();
  },
  mounted() {
    this.getShow();
  },
  methods: {
    getHandle() {
      let obj = {
        dept: this.$store.state.user.info.dept,
        locat: this.$store.state.user.info.locat,
      };
      this.$http.get("/pendingProcessing", { params: obj }).then((res) => {
        if (res.code == 200) {
          this.listData = res.data.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //echarts显示
    getShow() {
      var myChart = echarts.init(document.getElementById("member"));
      myChart.setOption(this.options);
    },
  },
};
</script>

<style lang="scss" scoped>
.warp {
  // height: 270px;
  width: 100%;
  margin: 20px 0;
  overflow: hidden;
  left: 0;
  transform: translate(0, 0) !important;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li,
    a {
      display: block;
      height: 30px;
      line-height: 30px;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
    }
  }
}
</style>